<template>
	<w-container class=' search' :diyNav="true">
		<!-- <w-navbar navType="my-nav" id="my-nav" ></w-navbar> -->
		<view class="nav plr-13 flex-1 flex flex-js-sb plr-12 flex-ai-center" slot='nav'>
			<w-icon name="arrow-left" color="#222" size="20" @click='back'></w-icon>
			<u-search @focus='focus' @blur='blur' :focus='hasFocus' bgColor='#fff' :placeholder="handleLang('请输入搜索内容')"
				v-model="form.search" :showAction='false' @search='search' color="#000" 	:searchIcon="searchIcon" ></u-search>
			<view class="history" v-if="showHistory&&loading!='loading'">
				<view class="flex flex-js-sb flex-ai-center pt-16 pb-24">
					<text class="font-color-textPrimary font-size-16 bold">{{handleLang('搜索历史')}}</text>
					<w-icon size='20' name="delete" color="#fff" @click='clearHistory'></w-icon>
				</view>
				<view class="flex flex-w">
					<view @click="search(item)" class="br-24 font-size-12 font-color-666 his-item plr-12 ptb-2 mr-8 mb-12" v-for="(item,index) in history" :key="index">
						{{handleLang(item)}}
					</view>
				</view>
			</view>
		</view>
		<view class="list mt-12" v-if="!showHistory">
			<view v-for='item in list' :key='item.id' class="bg-color-item pa-12"  style="border-bottom: 1rpx solid #f5f5f5;"
				@click="$u.route('/pages/notice/noticeDetails',{id:item.id})">
				<!-- <image lazy-load class="br-12" :src="$ossUrl+item.image" mode="" style="width: 100%;" mode="widthFix">
				</image> -->
				<view class="flex-1 pr-12 flex flex-dir-col flex-js-sb">
					<text class="font-size-14 font-color-textPrimary font-w-500"
						style="width: 100%;">{{item.title}}</text>
					<view class="font-size-10 flex flex-js-sb flex-ai-center mt-12">
						<view v-if="colorsNotice[item.affiche_type_id]" class="tag ptb-3 plr-6 br-4 text-overflow" style="max-width: 150rpx;" :style="{backgroundColor:colorsNotice[item.affiche_type_id].bg,color:colorsNotice[item.affiche_type_id].color}">
							{{item.affiche_type}}
						</view>
						<view v-else class="tag ptb-3 plr-6 br-4 text-overflow" style="max-width: 150rpx;" :style="{backgroundColor:colorsNotice[1].bg,color:colorsNotice[1].color}">
							{{item.affiche_type}}
						</view>
						<view class="flex flex-ai-center">
							<!-- <view class="font-color-subtitle font-w-500 mr-10 font-size-11">New</view> -->
							<text class="font-color-999">{{item.createtime|formatDate}}</text>
						</view>
					</view>
				</view>				
			</view>
		</view>
		<w-loading emptyTop="200" :type="loading" v-if="!showHistory" emptyType="search"></w-loading>
	</w-container>
</template>

<script>
	import {
		getNoticeList
	} from "@/api/notice/index.js"
	import { colorsNotice } from "./components/colorsNotice.js"
	export default {
		data() {
			return {
				form: {
					search: null,
					page: 1
				},
				colorsNotice,
				hasFocus: true,
				history: [],
				loading: 'none',
				keyword:null,
				list:[]
			};
		},
		computed: {
			showHistory() {
				return this.history.length && this.hasFocus
			},
			searchIcon() {
				let icon = this.keyword?`${this.$ossUrl}/static/icon/search3.png`:`${this.$ossUrl}/static/icon/search3.png`
				return icon
			}
		},
		onLoad({keyword}) {
			if(keyword){
				this.hasFocus=false;
				this.search(keyword)
			}
		},
		onShow() {
			this.getHistory()
		},
		onReachBottom() {
			this.loadMore()
		},
		
		methods: {
			search(word){
				if(!word) return;
				this.form.search=word;
				this.keyword=word;
				this.form.page=1;
				this.list=[]
				this.getList(this.form);
			},
			loadMore(){
				let form=this.$tools.copyObj(this.form);
				form.page++
				form.search=this.keyword;
				this.getList(form)
			},
			async getList(form) {
				if(!form.search){
					return uni.showToast({
						icon:"none",
						title:"搜索内容不可为空"
					})
				}
				if (this.loading == 'loading') return;
				this.loading = 'loading';
				try {
					this.setHistory(form.search);
					let res = await getNoticeList(form)
					if(res.data.data.length){
						this.form=form;
						
					}
					this.list=this.list.concat(res.data.data)
					this.loading = 'none'
					if (!res.data.total) {
						this.loading = 'empty'
					}
				} catch (e) {
					console.log(e)
					this.loading = 'none'
				}
			},
			clearHistory(){
				uni.removeStorageSync('notice-history')
				this.getHistory()
			},
			//设置历史搜索
			setHistory(word) {
				let list = this.getHistory();
				if (list.length > 9) {
					list.splice(10, 1);
				}
				if (list.indexOf(word) > -1) {
					list.splice(list.indexOf(word), 1)
				}
				list.unshift(word);
				uni.setStorageSync('notice-history', JSON.stringify(list));
				this.history = list;
			},
			//获取历史搜索
			getHistory() {
				let list = uni.getStorageSync('notice-history');
				if (!list) {
					this.history = []
				} else {
					this.history = JSON.parse(list);
				}
				return this.history
			},
			//聚焦
			focus() {
				this.hasFocus = true;
			},
			//失焦
			blur() {
				setTimeout(()=>{this.hasFocus = false;},100)
			},
			back() {
				this.backPage();
			}
		}
	}
</script>

<style lang="scss">
	.search {
		/deep/ .u-search {
			flex: none;
			width: 614rpx;
		}
		.nav{
			position: relative;
			.history{
				position: absolute;
				top:calc(var(--status-bar-height) + 88rpx);
				left: 0;
				width: 100%;
				@extend .plr-16;
			}
		}
	}
	.his-item{
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		// background: linear-gradient(139deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.09) 100%);
		// border-image: linear-gradient(157deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6)) 2 2;
		// border: 2rpx solid;
	}
</style>
